import {extendTheme} from "@mui/joy/styles"
import {CssVarsProvider} from "@mui/joy"
import PropTypes from "prop-types"
import React, {useState} from "react"
import {purple} from "./color.js"
import Ctx from "./ctx.js"

const Provider = (props) => {
  const [node, $node] = React.useState(document.body);
  const [theme, $theme] = useState(extendTheme({}))

  React.useEffect(() => {
    $node(document.body)
  }, []);
  const changeTheme = (themeData) => {
    $theme(extendTheme(themeData))
  }

  return <Ctx.Provider value={{
    changeTheme
  }}>
    <CssVarsProvider defaultMode={'dark'}
                     colorSchemeNode={node}
                     theme={theme}>
      {props.children}
    </CssVarsProvider>
  </Ctx.Provider>
}

Provider.propTypes = {
  children: PropTypes.element
}

export {Provider}

